<template>
  <el-aside v-if="ROUTES_CHILDREN.length > 0" class="aside-nav" width="13.333vw">
      <el-menu mode="vertical" :router="false" :default-active="CURRENT_SIDE_NAV">
        <template v-for="(item) in ROUTES_CHILDREN">
          <sidebar-item :key="item.name" :item="item" />
        </template>
      </el-menu>
  </el-aside>
</template>

<script>
import { mapState } from 'vuex'
import SidebarItem from './SidebarItem'
export default {
  components: {
    SidebarItem
  },
  computed: {
    ...mapState('routes_source', ['ROUTES_CHILDREN', 'CURRENT_SIDE_NAV'])
  }
}
</script>

<style scoped lang="scss">
.aside-nav {
  background: #fff;
  height: 95vh;
    border-right: 1px solid #ccc;
  .aside-nav__item {
    display: block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    color: #333;
  }
}
</style>
